<template>
  <view class="load-more-container">
    <view v-if="status === 'loading'" class="loading">
      <view class="spinner"></view>
      <text class="loading-text">{{ loadingText }}</text>
    </view>
    <view v-else-if="status === 'noMore'" class="no-more">
      <text class="no-more-text">{{ noMoreText }}</text>
    </view>
    <view v-else-if="status === 'error'" class="error" @click="retry">
      <text class="error-text">{{ errorText }}</text>
    </view>
  </view>
</template>

<script setup>
// 定义 props
const props = defineProps({
  // 状态：loading(加载中), noMore(没有更多), error(加载失败)
  status: {
    type: String,
    default: 'loading'
  },
  // 加载中文本
  loadingText: {
    type: String,
    default: '正在加载...'
  },
  // 没有更多文本
  noMoreText: {
    type: String,
    default: '没有更多数据了'
  },
  // 错误文本
  errorText: {
    type: String,
    default: '加载失败，点击重试'
  }
})

// 定义 emits
const emit = defineEmits(['retry'])

// 方法
const retry = () => {
  if (props.status === 'error') {
    emit('retry')
  }
}
</script>

<style scoped>
.load-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}

.loading {
  display: flex;
  align-items: center;
}

.spinner {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #f3f3f3;
  border-top: 2rpx solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text, .no-more-text, .error-text {
  font-size: 26rpx;
  color: #999;
}

.no-more {
  text-align: center;
}

.error {
  text-align: center;
  color: #007aff;
}

.error:active {
  opacity: 0.7;
}
</style>